<template>
  <div class="topmian">
    <i :class="iconName" @click="changeIcon"></i>
    <span>首页</span>

    <span class="exit"
      ><label
        style="font-size: 12px; border-bottom: 1px solid blue"
        @click="exit"
        >退出</label
      ></span
    >
    <span class="register"
      ><label
        style="font-size: 12px; border-bottom: 1px solid blue"
        @click="register"
        >注册</label
      ></span
    >
  </div>
</template>

<script>

export default {
  name: "Top",
  data() {
    return {
      iconName: "el-icon-s-fold",
    };
  },

  methods: {
    changeIcon() {
      // console.log(this.$parent.$parent.$parent.isShow);
      if (this.iconName === "el-icon-s-fold") {
        this.iconName = "el-icon-s-unfold";
        this.$parent.$parent.$parent.isShow=false
      } else {
        this.iconName = "el-icon-s-fold";
        this.$parent.$parent.$parent.isShow=true
      }
    },
    // 注册
    register() {
      // console.log(111)
      this.$router.push("/register");
    },
    // 退出
    exit() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
html,body{
  padding: 0px;
  margin: 0xp;
}
.topmian {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid rgba(179, 175, 175, 0.329);
}
.topmian > span {
  margin-left: 20px;
  line-height: 50px;
  color: #848484;
}
.topmian > .register {
  margin-right: 0px;
  line-height: 50px;
  float: right;
  color: blue;
}

.topmian > .exit {
  margin-right: 20px;
  line-height: 50px;
  float: right;
  color: blue;
}

.topmian > i {
  margin-left: 10px;
  line-height: 50px;
}
</style>